<template>
  <div id="box">
    <div v-for="n in 5" :key="n" :class="{'on':cur>= n }" @click="Selected(n)">
    </div>
  </div>
</template>

<script>
export default {
  props: {
    cur: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
    };
  },
  methods: {
    Selected(n) {
      this.cur = n;
      this.$emit("childClick", n);
    }
  }
};
</script>

<style lang="scss">
#box .on{
    background: url('../../assets/images/on.png') no-repeat;
    background-size: 16px;
}
#box div{
    width: 16px;
    height: 16px;
    cursor: pointer;
    float: left;
    background: url('../../assets/images/off.png') no-repeat;
    background-size: 16px;
}
</style>
